<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>WebGL - Triangle with position for color</title>
  <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
</head>

<body>
  <div class="description">
    test cube
  </div>
  <canvas id="canvas"></canvas>
  <div id="uiContainer">
    <div id="ui">
      <div id="x"></div>
      <div id="y"></div>
      <div id="angle"></div>
      <div id="scaleX"></div>
      <div id="scaleY"></div>
    </div>
  </div>
</body>
<!-- vertex shader -->
<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec4 a_color;
uniform mat4 u_mvpmat;
varying vec4 v_color;
attribute vec2 a_texCoor;
varying vec2 v_texCoor;
attribute float a_ratio;
varying float v_ratio;
void main() {
  gl_Position = u_mvpmat * a_position;
  v_color = a_color;
}
</script>
<!-- fragment shader v_color+vec4(v_texCoor,0.5,0.5); -->
<script id="fragment-shader-2d" type="x-shader/x-fragment">
precision mediump float;
varying vec2 v_texCoor;
varying vec4 v_color;
uniform sampler2D u_sampler;
uniform sampler2D u_sampler2;
varying float v_ratio;
uniform float u_usetex2;
void main() {
  gl_FragColor = v_color;

}
</script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script src="resources/webgl-lessons-ui.js"></script>
<script src="resources/m3.js"></script>
<script src="resources/m4.js"></script>
<script>
  "use strict";

  function main() {
    // Get A WebGL context
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#canvas");
    var gl = canvas.getContext("webgl");
    if (!gl) {
      return;
    }

    // setup GLSL program
    var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    let data1 = new Float32Array([
      1,1,1, 1,
      -1,1,1, 1,
      -1,-1,1, 1,
      1,-1,1, 1,
      1,-1,-1, 1,
      1,1,-1, 1,
      -1,1,-1, 1,
      -1,-1,-1, 1
    ]);
    let data2 = new Float32Array([
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      1, 0, 0, 1,
      0, 1, 0, 1,
      0, 1, 0, 1,
      0, 1, 0, 1,
      0, 1, 0, 1]);
    // let data3 = new Float32Array([
    //   0, 1,
    //   0, 0,
    //   1, 1,
    //   1, 0]);
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    var positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data1,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(
      positionAttributeLocation, 4, gl.FLOAT, false, 0, 0);

    var colorAttr = gl.getAttribLocation(program, "a_color");
    var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data2,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(colorAttr);
    gl.vertexAttribPointer(
      colorAttr, 4, gl.FLOAT, false, 0, 0);

    // var texCoorAttr = gl.getAttribLocation(program, "a_texCoor");
    // var texCoBuffer = gl.createBuffer();
    // gl.bindBuffer(gl.ARRAY_BUFFER, texCoBuffer);
    // gl.bufferData(
    //   gl.ARRAY_BUFFER,
    //   data3,
    //   gl.STATIC_DRAW);
    // gl.enableVertexAttribArray(texCoorAttr)
    // gl.vertexAttribPointer(texCoorAttr, 2, gl.FLOAT, false, 0, 0)
    var indices = new Uint8Array([
        0,1,2,0,2,3,
        0,3,4,0,4,5,
        0,5,6,0,6,1,
        1,6,7,1,7,2,
        7,4,3,7,3,2,
        4,7,6,4,6,5]);
        var indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(
      gl.ELEMENT_ARRAY_BUFFER,
      indices,
      gl.STATIC_DRAW);
    // gl.enableVertexAttribArray(colorAttr);
    // gl.vertexAttribPointer(
    //   colorAttr, 8, gl.FLOAT, false, 0, 0);




    var matrixLocat = gl.getUniformLocation(program, "u_mvpmat");
    var projM = m4.perspective((Math.PI*0/180), 1, 1, 100);
    
    projM = m4.lookAt(new Float32Array([1-0.5,-1+0.5,-1+0.5]), new Float32Array([0,0,0]), new Float32Array([0,1,0]), projM);

    // projM = m4.translate(projM, 0.2, 0.2, 0.2);
    projM = m4.scale(projM, 0.2, 0.2, 0.2);
    // projM = m4.zRotate(projM, 0);

    gl.uniformMatrix4fv(matrixLocat, false, projM);

    var tim = Date.now();
    var tim2 = tim;
    var getAngle = function () {
      var cur = Date.now();
      var delta = cur - tim;
      tim = cur;
      return (0.8 * delta / 1000) % 3;
    }
    var rotate = function () {
      projM = m4.zRotate(projM, getAngle());
      gl.uniformMatrix4fv(matrixLocat, false, projM);
    }

    // Draw the scene.
    function drawScene() {
      var primitiveType = gl.TRIANGLES;
      var offset = 0;
      var count = 36;
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
      gl.enable(gl.DEPTH_TEST)
      gl.drawElements(primitiveType,count,gl.UNSIGNED_BYTE, offset );
    }
    function func() {
      rotate();
      drawScene();
      requestAnimationFrame(func);
    }

    func();
  }

  main();
</script>

</html>